<template>
  <view class="category">
    <!-- 搜索框 -->
    <UgoSearch></UgoSearch>
    <!-- 内容 -->
    <view class="main">
      <!-- 菜单导航栏 -->
        <view class="menus">
        <view
          class="item"
          :class="current===index?'active':''"          
          v-for="(item,index) in menus"
          :key="item"
          @click="changeCurrent(index)"
          >{{ item }}</view
        >
      </view>
      <!-- 右侧内容 -->
      <view class="contents">
        <view class="group" v-for="item1 in contents" :key="item1.cat_id">
          <view class="group-title">{{item1.cat_name}}</view>
          <view class="group-content">
            <navigator :url="`/pages/good-list/good-list?cid=${item2.cat_id}`" v-for="item2 in item1.children" :key="item2.cat_id">
              <u-image :src="item2.cat_icon" width="120" height="120"></u-image>
            <view>{{item2.cat_name}}</view>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data(){
    return{
      // 菜单导航栏
      menus:[],
      // 内容
      contents:[],
      // 切换导航栏
      current:0

    }
  },
  methods:{
    changeCurrent(index){
      // console.log(index);
      this.current=index
       // 切换右侧显示的内容
      this.contents = this.categories[index].children;
    },
    },
 async onLoad(){
  const result=await this.$u.get('/categories')
  // console.log(17,result);
    this.categories = result.message; 
  // this.menus=result.message.map((v)=>v.cat_name)
  this.menus= this.categories.map((v)=>v.cat_name)
  // this.contents=result.message[0].children
  this.contents=this.categories[0].children
  }
}
</script>

<style lang="scss">
.category {
  .main {
    height: calc(100vh - 84rpx);
    display: flex;
    .menus {
      overflow: auto;
      width: 182rpx;
      .item {
        height: 70rpx;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .active {
        color: #eb4450;
      }
    }
    .contents {
      flex: 1;
      overflow: auto;
      .group-title {
        height: 70rpx;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        &::before {
          content: '/';
          margin-right: 10rpx;
        }
        &::after {
          content: '/';
          margin-left: 10rpx;
        }
      }
      .group-content {
        display: flex;
        flex-wrap: wrap;
        padding: 0 48rpx;
        // justify-content: space-around;
        // justify-content: space-between;
        // justify-content: space-evenly;
        navigator {
          width: 120rpx;
          // margin: 0 48rpx;
          margin-right: 56rpx;
        }
        // 3倍数
        navigator:nth-child(3n) {
          margin-right: 0rpx;
        }
      }
    }
  }
}
</style>